

<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
  <h1 *ngIf="!widget" class="float-left" i18n="lightning.liquidity-ranking">Liquidity Ranking</h1>

  <div class="clearfix"></div>

  <div style="min-height: 295px">
    <table class="table table-borderless">
      <thead>
        <th class="text-left" i18n="nodes.alias">Alias</th>
        <th class="liquidity text-right" i18n="node.liquidity">Liquidity</th>
        <th class="d-table-cell fiat text-right" [class]="{'widget': widget}">{{ currency$ | async }}</th>
        <th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Channels</th>
        <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th>
        <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
        <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
      </thead>
      <tbody *ngIf="topNodesPerCapacity$ | async as data">
        <tr *ngFor="let node of data.nodes;">
          <td class="pool text-left">
            <div class="tooltip-custom d-block w-100">
              <a class="link d-block w-100" [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">
                <span class="pool-name w-100">{{ node.alias }}</span>
              </a>
            </div>
          </td>
          <td class="text-right">
            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
            <span class="capacity-ratio">&nbsp;({{ (node?.capacity / data.statistics.totalCapacity * 100) | number:'1.1-1' }}%)</span>
          </td>
          <td class="d-table-cell fiat text-right" [ngClass]="{'widget': widget}">
            <app-fiat [value]="node.capacity"></app-fiat>
          </td>
          <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
            {{ node.channels | number }}
            <span class="capacity-ratio">&nbsp;({{ (node?.channels / data.statistics.totalChannels * 100) | number:'1.1-1' }}%)</span>
          </td>
          <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
          </td>
          <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
          </td>
          <td *ngIf="!widget" class="d-none d-md-table-cell text-right text-truncate">
            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
          </td>
        </tr>
      </tbody>
    </table>

    <ng-template [ngIf]="!widget">
      <div class="clearfix"></div>
      <br>
    </ng-template>
  </div>
  
</div>
